<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影作品集 - Photography Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">摄影作品集</div>
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link active">首页</a></li>
                <li><a href="#gallery" class="nav-link">作品</a></li>
                <li><a href="#about" class="nav-link">关于</a></li>
                <li><a href="#contact" class="nav-link">联系</a></li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- 首页横幅 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1 class="hero-title">捕捉瞬间之美</h1>
            <p class="hero-subtitle">用镜头记录世界，用光影诉说故事</p>
            <a href="#gallery" class="btn-primary">查看作品</a>
        </div>
        <div class="hero-overlay"></div>
    </section>

    <!-- 作品集分类 -->
    <section id="gallery" class="gallery-section">
        <div class="container">
            <h2 class="section-title">我的作品</h2>
            <p class="section-subtitle">探索不同主题的摄影作品</p>

            <!-- 分类过滤器 -->
            <div class="filter-buttons">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="nature">自然风光</button>
                <button class="filter-btn" data-filter="portrait">人像</button>
                <button class="filter-btn" data-filter="street">街拍</button>
                <button class="filter-btn" data-filter="abstract">抽象</button>
            </div>

            <!-- 图片网格 -->
            <div class="gallery-grid">
                <!-- 自然风光 -->
                <div class="gallery-item" data-category="nature">
                    <img src="微信图片_20251014190047_25685_799.jpg" alt="我的照片">
                    <div class="gallery-overlay">
                        <h3>我的摄影作品</h3>
                        <p>自然风光</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="nature">
                    <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80" alt="森林">
                    <div class="gallery-overlay">
                        <h3>神秘森林</h3>
                        <p>自然风光</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="nature">
                    <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80" alt="湖泊">
                    <div class="gallery-overlay">
                        <h3>静谧湖泊</h3>
                        <p>自然风光</p>
                    </div>
                </div>

                <!-- 人像 -->
                <div class="gallery-item" data-category="portrait">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&q=80" alt="人像1">
                    <div class="gallery-overlay">
                        <h3>优雅时刻</h3>
                        <p>人像</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="portrait">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80" alt="人像2">
                    <div class="gallery-overlay">
                        <h3>自信笑容</h3>
                        <p>人像</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="portrait">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&q=80" alt="人像3">
                    <div class="gallery-overlay">
                        <h3>真实瞬间</h3>
                        <p>人像</p>
                    </div>
                </div>

                <!-- 街拍 -->
                <div class="gallery-item" data-category="street">
                    <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=800&q=80" alt="城市">
                    <div class="gallery-overlay">
                        <h3>城市夜景</h3>
                        <p>街拍</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="street">
                    <img src="https://images.unsplash.com/photo-1514565131-fce0801e5785?w=800&q=80" alt="街道">
                    <div class="gallery-overlay">
                        <h3>繁华街道</h3>
                        <p>街拍</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="street">
                    <img src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&q=80" alt="建筑">
                    <div class="gallery-overlay">
                        <h3>现代建筑</h3>
                        <p>街拍</p>
                    </div>
                </div>

                <!-- 抽象 -->
                <div class="gallery-item" data-category="abstract">
                    <img src="https://images.unsplash.com/photo-1557672172-298e090bd0f1?w=800&q=80" alt="抽象1">
                    <div class="gallery-overlay">
                        <h3>光影交错</h3>
                        <p>抽象</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="abstract">
                    <img src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?w=800&q=80" alt="抽象2">
                    <div class="gallery-overlay">
                        <h3>色彩律动</h3>
                        <p>抽象</p>
                    </div>
                </div>

                <div class="gallery-item" data-category="abstract">
                    <img src="https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=800&q=80" alt="抽象3">
                    <div class="gallery-overlay">
                        <h3>几何之美</h3>
                        <p>抽象</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于部分 -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="about-content">
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1502877338535-766e1452684a?w=600&q=80" alt="摄影师">
                </div>
                <div class="about-text">
                    <h2 class="section-title">关于我</h2>
                    <p>你好！我是一名热爱摄影的创作者，专注于捕捉生活中的美好瞬间。</p>
                    <p>从自然风光到人文街拍，我相信每一个画面都有其独特的故事。通过镜头，我希望能够与你分享这个世界不同的视角和情感。</p>
                    <p>我的作品涵盖了多个摄影领域，包括风光摄影、人像摄影、街头摄影和抽象艺术。每一张照片都是我对美的理解和表达。</p>
                    <div class="about-stats">
                        <div class="stat-item">
                            <h3>500+</h3>
                            <p>作品数量</p>
                        </div>
                        <div class="stat-item">
                            <h3>5年</h3>
                            <p>摄影经验</p>
                        </div>
                        <div class="stat-item">
                            <h3>20+</h3>
                            <p>展览活动</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系部分 -->
    <section id="contact" class="contact-section">
        <div class="container">
            <h2 class="section-title">联系我</h2>
            <p class="section-subtitle">如有合作意向或任何问题，欢迎与我联系</p>
            <div class="contact-content">
                <form class="contact-form">
                    <div class="form-group">
                        <input type="text" placeholder="您的姓名" required>
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="您的邮箱" required>
                    </div>
                    <div class="form-group">
                        <textarea placeholder="您的留言" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn-primary">发送消息</button>
                </form>
                <div class="contact-info">
                    <div class="info-item">
                        <h3>📧 邮箱</h3>
                        <p>photographer@example.com</p>
                    </div>
                    <div class="info-item">
                        <h3>📱 电话</h3>
                        <p>+86 138 0000 0000</p>
                    </div>
                    <div class="info-item">
                        <h3>📍 地址</h3>
                        <p>中国，北京</p>
                    </div>
                    <div class="social-links">
                        <a href="#" class="social-link">Instagram</a>
                        <a href="#" class="social-link">微博</a>
                        <a href="#" class="social-link">500px</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 摄影作品集. All rights reserved.</p>
        </div>
    </footer>

    <!-- 灯箱模态框 -->
    <div id="lightbox" class="lightbox">
        <span class="lightbox-close">&times;</span>
        <img class="lightbox-content" id="lightbox-img">
        <div class="lightbox-caption" id="lightbox-caption"></div>
        <a class="lightbox-prev">&#10094;</a>
        <a class="lightbox-next">&#10095;</a>
    </div>

    <script src="script.js"></script>
</body>
</html>

